<template>
  <div class="card params-div-pos">
    <div class="title1">
      缓变遥测数据列表
    </div>
    <el-table 
    :data="tableData" 
    :row-class-name="tableRowClassName"
    class="big-table"
    stripe 
    height="1500px">
    <el-table-column prop="seq" label="seq" width="60px"></el-table-column>
    <el-table-column prop="name" label="name"></el-table-column>
    <el-table-column label="value">
      <template #default="scope">{{ fixed7Float(scope.row.value) }}</template>
    </el-table-column>
    <el-table-column label="offset">
      <template #default="scope">{{ formatValue(scope.row.offset) }}</template>
    </el-table-column>
    <el-table-column label="bits">
      <template #default="scope">{{ formatValue(scope.row.bits) }}</template>
    </el-table-column>
    <el-table-column prop="datatype" label="datatype">
      <template #default="scope">{{ formatValue(scope.row.datatype) }}</template>
    </el-table-column>
    <el-table-column prop="process" label="process">
      <template #default="scope">{{ formatValue(scope.row.process) }}</template>
    </el-table-column>
    <el-table-column label="method">
      <template #default="scope">{{ formatValue(scope.row.method) }}</template>
    </el-table-column>    
    <el-table-column prop="oribytes" label="oribytes"></el-table-column>
    <el-table-column prop="description" label="description"  width="160px"></el-table-column>
    <el-table-column label="unit" align="center">
      <template #default="scope">{{ formatValue(scope.row.unit) }}</template>
    </el-table-column>
    <el-table-column label="range" align="center">
      <template #default="scope">{{ formatValue(scope.row.range) }}</template>
    </el-table-column>
    <el-table-column label="复制">
      <template #default="scope">
        <el-button 
        class="btn"
        text
        title="复制"
        :data-clipboard-text="scope.row.value" 
        @click="handleCopy()">
          <el-icon><DocumentCopy /></el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, watch, onBeforeMount, onBeforeUnmount } from 'vue'
import { DocumentCopy } from '@element-plus/icons-vue'
import { useWsStore } from '@/stores/ws-module'
import Clipboard from 'clipboard'
import { failedNotify, successNotify, fixed7Float } from '@/comm/index.js'
import { initSlowTmWs } from '@/api/wsObj.js'

let tableData = ref([])
let curSeqArr = []
let wsObj = null
const wsStore = useWsStore()
const slowtmArr = computed(() => wsStore['slow'])

watch(slowtmArr, () => {
  initTable()
})
onBeforeMount(() => {
  wsObj = initSlowTmWs()
})
onMounted(() => {
  getPassSeq()
})
onBeforeUnmount(() => {
  wsObj?.disconnect()
})
const initTable = () => {
  tableData.value = pickSeqData(curSeqArr, slowtmArr.value)
}

const pickSeqData = (seqArr, arr) => {
  let resArr = []
  for (const item of arr) {
    if(seqArr.includes(item.seq+'')) {
      resArr.push(item)
    }
  }
  return resArr
}
const getPassSeq = () => {
  const curHref = window.location.href
  let params = curHref.split("?seq=")[1]
  if(params !== '') {
    curSeqArr = params.split(",")
  }
}

const tableRowClassName = ({row}) => {
  if(row.warning === true) {
    return 'warning-row'
  }
}

const handleCopy = () => {
  let clipboard = new Clipboard('.btn')
	//成功的回调
  clipboard.on('success', () => {
    successNotify('复制成功！')
    clipboard.destroy();// 销毁复制缓存,避免出现复制之前复制的内容
  });
  //失败的回调
  clipboard.on('error', () => {
    failedNotify('复制失败')
  })
}

const formatValue = (val) => {
  let res = val
  if(val === '') {
    res = '--'
  }
  return res
}
</script>

<style lang="scss" scoped>
.el-table .warning-row {
    background: #d6573c;
  }
.params-div-pos {
  margin-top: 1em;
  padding-left: 15px;
  width: 98%
}
.big-table {
  font-size: 16px;
}
</style>